var domain = "http://netease.bluej.cn";
//			var url = domain + "/top/list?idx=1";
//			console.log(url);

var abc = new XMLHttpRequest();
abc.open("GET", "neteaseCloud.json");
abc.addEventListener("readystatechange", function() {
	function time(dt) {
		var m = Math.floor(dt / 1000 / 60 % 60);
		var s = Math.floor(dt / 1000 % 60);
		m < 10 ? m = "0" + m : m;
		s < 10 ? s = "0" + s : s;
		return `${m}:${s}`
	}
	if(abc.readyState == 4 && abc.status == 200) {
		//					1.转化为JS对象
		var res = JSON.parse(abc.response);
		//					2.提取所需数据
		res = res.playlist.tracks;

		var template = "";
		res.forEach((el, index) => {
			var mcSum = document.querySelector(".title-list .mcSum");
			mcSum.innerText = res.length + "首歌";

			//						字符串模板渲染：
			//									1.歌曲排名
			//									2.歌曲标题
			//									3.专辑封面
			//									4.歌曲名
			//									5.歌曲时长
			//									6.演唱歌手
			var str = `<li class="item">
										<div class="mcIndex"><span>${index+1}</span></div>
										
										<div class="mcTitle">
											<div class="imgWrap">
												<a href="https://music.163.com/#/song?id=${res[index].id}" target="_blank">
													<img src=${res[index].al.picUrl} />
												</a>
											</div>
											<span class="control iconfont icon-bofanganniu"> </span>
											<div class="musicName">
												<a href="https://music.163.com/#/song?id=${res[index].id}" target="_blank">
													<span>${res[index].name}</span>
												</a>
											</div>
											
										</div>
										<div class="mcTime">
											<span>${time(res[index].dt)}</span>
										</div>
										
										<div class="mcSinger">
											<a href="https://music.163.com/#/artist?id=${res[index].ar[0].id}" target="_blank">
											<span>${res[index].ar[0].name}</span></a>
										</div>
										
									</li>`;
			template += str;
		})

		var musicList = document.querySelector(".musicList");
		musicList.innerHTML += template;

		//					获取播放按钮元素
		var control = document.querySelectorAll(".control");
		control.forEach((b, index) => {
			//						循环播放按钮,添加点击事件
			b.addEventListener("click", function() {
				control.forEach((e) => {
					//								先移除激活类名 mcActive
					e.classList.remove("mcActive");
				});
				//							给当前播放按钮添加激活颜色
				b.classList.add("mcActive");

				//							获取 audio 播放器
				var audios = document.querySelector("audio");
				//							绑定播放按钮,通过点击按钮,给播放器添加播放接口路径
				audios.src = "https://music.163.com/song/media/outer/url?id=" + (res[index].id);
				//							激活播放器
				audios.play();

			});

		});

	}
})

abc.send();